<template>
  <div class="all">
    <!--门店详情 -->
    <el-form label-width="100px" class="demo-ruleForm" :inline=true>
      <div class="informa">
         <div class="tetli"> 门店详情</div>
         <div>
          <div>
            <div  class="Basiclist">
              <span>门店账号：{{detailData.storeCode}}</span>
              <span>门店名称：{{detailData.id}}</span>
              <span v-if="detailData.storeType == item.value" v-for="(item,index) in shopClass" :key="index">店铺分类：{{item.label}}</span>
              <span>所在地区：{{detailData.provinceName}}{{detailData.cityName}}{{detailData.districtName}}</span>
              <span>详细地址：{{detailData.address}}</span>
              <span>线上店铺：{{detailData.isPhysicalStore == 1 ? '是' : '否'}}</span>
              <span v-if="detailData.status == 1">门店状态：已绑定</span>
              <span v-else>门店状态：未绑定</span>
              <span>商户名称：{{detailData.id}}</span>
              <span>商户编码：{{detailData.mchId}}</span>
               <span>
                <div style="margin-bottom:10px;">门店logo：</div>
                   <img :src="imgBaseUrl + detailData.storeLogo" width="200px" height="220" style="object-fit: cover;" @click="logoClick"/>
              </span>
               <span>
                <div style="margin-bottom:10px;">门店实景图：</div>
                  <img :src="imgBaseUrl + detailData.storeImg" width="200px" height="220" style="object-fit: cover;" @click="storeClick"/>
              </span>
            </div>
          </div>
         </div>
      </div>
    </el-form>
     <!-- 图片弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="20%" v-if="queryImg">
      <div>
          <img :src="imgBaseUrl+queryImg" width="100%" height="100%" style="object-fit: cover;"/>
      </div>
    </el-dialog>

       <!-- 经营者信息 -->
     <div  class="informa">
      <div class="tetli"> 经营者信息</div>
      <div  class="Basiclist">
        <span>门店负责人：{{detailData.contacts}}</span>
        <span>联系方式：{{detailData.contactPhone}}</span>
        <span>门店邮箱：{{detailData.email}}</span>
      </div>
    </div>

      <!-- 营业信息 -->
      <div class="informa">
        <div class="tetli"> 营业信息</div>
        <div style="margin-bottom:30px;">纳税人识别号：{{detailData.taxpayerNo}}</div>
        <div class="img_box">
          <div>
            <div calss="tetli_img">营业执照附件：</div>
            <img :src="imgBaseUrl + detailData.licenseImg" width="200px" height="280" style="object-fit: cover;" @click="licenseClick"/>
          </div>
        </div>
      </div>

        <!-- 设备信息 -->
       <div class="informa aptitudes">
            <div class="tetli">设备信息</div> 
            <el-table class="alldata" :data="deviceList" stripe  style="width: 100%;margin-top:20px;overflow: auto;" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
                <el-table-column type="index" label="序号" align="center" width="150"> </el-table-column>
                <el-table-column prop="equipmentNo" label="SN编号" align="center" width="250"> </el-table-column>
                <el-table-column prop="equipmentName" label="设备名称" width="250" align="center"> </el-table-column>
                <el-table-column prop="storeid" label="绑定人数"  width="250" align="center"> </el-table-column>
                <el-table-column prop="status" label="设备在线状态"  width="250" align="center"></el-table-column>
                <el-table-column prop="enableStatus" label="是否启用"  width="220" align="center">
                <template slot-scope="scope">
                    <el-switch class="lef" @change="changes(scope.row, scope.$index)" v-model="scope.row.enableStatus == 0 ? true : false" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </template>
                </el-table-column>
                <el-table-column prop="activationTime" label="激活时间"  width="220" align="center"> </el-table-column>
            </el-table>
       </div>
         <div style="text-align:right;margin-top:20px;"><el-button @click="fanhui">返回</el-button></div>
  </div>
</template>

<script>

import { upload } from '@/components/upload-elementui'
import { queryMerchant, shopMerchabt, deviceMerchabt, shopDetil } from '@/api/merchants'
export default {
  data() {
    return {
      dialogVisible:false,
      queryImg:null,//图片变量
      imgBaseUrl: `${process.env.VUE_APP_FILE_URL}/`,
      shopClass:[{value:1,label:'平台'},{value:2,label:'加盟'},{value:3,label:'自营'},{value:4,label:'联盟'},{value:5,label:'专卖'},{value:6,label:'其他'}],
      detailData:{},
      shopId:'',//当前门店ID
      tableData: [],//店铺数据
      deviceList:[],//设备数据
    }
},
  created(){
    this.shopId = this.id
    this.merchantsDetail()
    this.deviceShow()
  },
    computed:{
    id(){
      return this.$route.params.id
    }
  },
  methods: {
    licenseClick() {//点击营业执照图片
      this.queryImg = this.detailData.licenseImg
      this.dialogVisible = true
    },
    logoClick() {//点击logo图片
      this.queryImg = this.detailData.storeLogo
      this.dialogVisible = true
    },
    storeClick() {//实景图点击
      this.queryImg = this.detailData.storeImg
      this.dialogVisible = true
    },
    async merchantsDetail() {//门店详情基本信息
      let queryData = await shopDetil({id:this.shopId})
      if(queryData.code == 200){
        this.detailData = queryData.data
        console.log(this.detailData)
      }
    },
    async deviceShow() {//设备列表
      let deviceData = await deviceMerchabt({
        mchId:this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).mchId : '1',
        pageNum:1,
        pageSize:10
      })
      console.log(deviceData)
      if(deviceData.code == 200) {
        this.deviceList = deviceData.data.list
      }
    },
		fanhui(view){ //返回按钮
			this.$router.go(-1);
			this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
				this.toLastView(visitedViews, view)
			})
		},
		 toLastView(visitedViews, view) {
			const latestView = visitedViews.slice(-1)[0]
			if (latestView) {
				this.$router.push(latestView.fullPath)
			}
		},
  }
}
</script>

<style scoped lang="scss">
*{
  color: #797979;
}
.all {
  box-sizing: border-box;
  padding: 15px;
}
.informa {
  width: 100%;
  height: auto;
  background-color: #fff;
  background-color: #fff;
  margin-top: 25px;
  border-radius: 6px;
  padding: 15px;
  -webkit-box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  padding-bottom: 40px;
}
 .phones ::v-deep .el-form-item__content {
   display: inline-flex;
} 
 .informa ::v-deep .el-form-item__label {
  padding:0 !important;
  
 } 
::v-deep .el-form-item--medium{
    text-align: left !important;
 }
.el-form-item{
  display: inline;
}
 .el-input{
  width:40vw !important;
  
}
.el-form-item__label{
  padding:0px !important;
}
.tetli{
  height: 60px;
  line-height: 60px;
  font-weight: bold;
  border-bottom: 2px solid #F6F6F6;
  margin-bottom: 30px;
  color: #333333;
}
.aptitudes{
 .updata{
   display: inline-block;
   padding-right: 50px;
 }
 .open{
   margin-bottom:50px;
   padding-right: 200px;
 }
}
.Basiclist{
 width:100%;
 span{
   display:inline-block;
   margin-bottom: 30px;
   width:30%;
 }
 
}

.img_box{
    display:flex;
    justify-content: space-between;
    img{
      margin-top: 10px;
    }
}
.tetli_img{
     margin-bottom:20px;
}
</style>
